<template>
  <div class="bl-box">
    <el-input v-model="search" ref="searchBox" clearable/>
    <div class="tree-box">
      <!--<my-tree ref="myTree" :filter-node-method="filterNode" :data="stTree" :props="props"-->
      <!--         @item-click="handleItemClick"/>-->
      <el-tree
          ref="myTree"
          :data="stTree"
          :filter-node-method="filterNode"
          :props=" props"
          class="myTree"
          @node-click="handleItemClick">
        <!--<template slot-scope="{ node, data }">-->
        <!--  <div style="height: 40px">-->
        <!--    {{ data.label }}-->
        <!--  </div>-->
        <!--</template>-->
      </el-tree>
    </div>
  </div>
</template>

<script>
import commonMixins from "@/mixins/commonMixins";
import { mapState } from 'vuex'
import MyTree from "@/components/MyTree";

export default {
  components: { MyTree },
  mixins: [commonMixins],
  name: "SelectBl",
  data () {
    return {
      props: {
        label: 'label',
      },
      search: ''
    }
  },
  computed: {
    ...mapState(['stTree'])
  },
  mounted () {
    this.$refs.searchBox.$on("input", this.debounce(this.filter, 1000))
  },
  methods: {
    filter () {
      this.$refs.myTree.filter(this.search)
    },
    filterNode (value, data) {
      if (!value) return true;
      return data[this.props.label].indexOf(value) !== -1;
    },
    expandSt (st) {
      this.$set(st, 'expanded', !st.expanded)
    },
    handleItemClick (item) {
      if (item.parent) {
        this.$emit('select', item, item.parent)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bl-box {
  height: 100%;
  display: flex;
  flex-direction: column;

  .tree-box {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
